@import 'base';


:root{
  --primary-light: #8abdff;
  --primary: #6d5dfc;
  --primary-dark: #5b0eeb;
  --white: #FFFFFF;
  --greyLight-1: #E4EBF5;
  --greyLight-2: #c8d0e7;
  --greyDark: #9baacf;
}

.container{
  width: 40vw;
  height: 20vw;
  border:10px solid var(--greyLight-1);
  box-shadow: .5vw .5vw 1vw var(--greyLight-2),inset .3vw .3vw .7vw var(--greyLight-2),-.5vw -.5vw 1vw #fff,inset -.3vw -.3vw .7vw #fff;
  background-color: var(--greyLight-1);
  border-radius: 2vw;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  input{display: none;}
}
.radio_tab{
  position: relative;
  width: 90%;
  height: 5rem;
  margin-top: 5%;
  border-radius: 1.2vw;
  display: flex;
  justify-content: space-evenly;
  font:28px/5rem 'MedievalSharp', cursive;
  align-items: center;
  box-shadow: .3vw .3vw .7vw var(--greyLight-2),-.5vw -.5vw 1vw #fff;
  
  & input:checked{
    & + label p{
      color: var(--primary);
      text-shadow: 1px 1px 5px var(--primary);
      transition: .3s ease;
    }
  }

  label{
    flex:1;
    display: flex;
    justify-content: center;
    cursor: pointer;
    color: var(--greyDark);
    transition: .3s ease;
    :hover{
      color: var(--primary);
      transition: .3s ease;
    }
    p{
     cursor: pointer;
    }
  }

  &_choose{
    position: absolute;
    left: 2%;
    width: calc((1/3) * 88%);
    height: 80%;
    border-radius: 1.2vw;
    box-shadow: inset .3vw .3vw .6vw var(--greyLight-2),inset -.3vw -.3vw .9vw #fff;
    transition: .3s  cubic-bezier(0.645,0.045,0.355,1);
  }
  #tab-2:checked ~ &_choose{
    left: calc((1/3) * 88% + 6%);
    transition: .3s cubic-bezier(0.645,0.045,0.355,1);
  }
  #tab-3:checked ~ &_choose{
    left: calc((2/3) * 88% + 10%);
    transition: .3s cubic-bezier(0.645,0.045,0.355,1);
  }
}